<!--
 * @Date: 2021-10-27 09:15:50
 * @LastEditors: 邓春宜
 * @Desc: pie2
 * @LastEditTime: 2021-11-15 16:06:48
 * @FilePath: \tianjushi-kanban\src\components\charts\Sankey1.vue
-->
<template>
  <div :style="[{ width: width, height: height, overflow: 'hidden' }]">
    <div
      ref="echartref"
      :style="[{ width: width, height: height }, _resetChartStyle]"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import {
  onMounted,
  toRefs,
  ref,
  reactive,
  watch,
  computed,
  nextTick,
  version,
} from "vue";
import { resetChartStyle, showLoading, hexToRgba } from "@/core/tools/common";
export default {
  props: {
    title: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    chartdata: {
      type: Array,
      default: [
        {
          source: "公共平台",
          target: "系统0000",
          value: 1044305,
        },
        {
          source: "公共平台",
          target: "系统0011",
          value: 651527,
        },
        {
          source: "公共平台",
          target: "系统0022",
          value: 651527,
        },
         
        {
          source: "系统0011",
          target: "系统11",
          value: 645246,
        },
        {
          source: "系统0022",
          target: "系统22",
          value: 513275,
        }, 
      ],
    }, 
    color: {
      default: ["#1F9EFF", "#1BC85E", "#FFC107", "#FF6C6B"],
      type: Array,
    },
    fontSize: {
      default: 18,
      type: Number,
    }, 
  },
  setup: function (props, context) {
    let chartInstance = null; //折线不能用响应式接收echart
    /*监听props*/
    watch(props, (newProps, oldProps) => {
      f_echartInit(chartInstance);
    });

    let state = reactive({
      echartref: ref(),
      chartInit: "",
    });
    const _resetChartStyle = computed({
      get() {
        return resetChartStyle();
      },
    });

    const f_echartInit = (chartdom) => {
      let datalist = [  
      ];
      
      let linksData = props.chartdata; 

      let namelist = [] ;
      linksData.forEach((x)=>{
        if (namelist.indexOf(x.source)==-1) {
          namelist.push(x.source)
        }
        if(namelist.indexOf(x.target)==-1) {
          namelist.push(x.target)
        }
      })

      namelist.forEach((x)=>{
          datalist.push({name:x}) 
      })
     
      let Color = [
        "#4E70F0",
        "#937FE6",
        "#2B56D3",
        "#87E7AA",
        "#937FE6",
        "#FF9B97",
        "#8f23f5",
        "#0576ea",
        "#2cb8cf",
        "#8A7EE0",
        "#2cb8cf",
        "#4e70f0",
        "#1fa3de",
        "#bbc951",
        "#FFC14B",
        "#b785a6",
      ];
      let Color1 = [
        "#04E0F3",
        "#682EFC",
        "#35A7FE",
        "#0DC09F",
        "#682EFC",
        "#ED6663",
        "#8f23f5",
        "#0576ea",
        "#2cb8cf",
        "#8A7EE0",
        "#2cb8cf",
        "#4e70f0",
        "#1fa3de",
        "#bbc951",
        "#FFC14B",
        "#b785a6",
      ];
      let sourceLabel = [
        "right",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
        "left",
      ];
      let itemStyleColor = [];
      let labelSource = [];
      for (let i = 0; i < datalist.length; i++) {
        datalist[i].label = {
          normal: {
            position: sourceLabel[i],
          },
        };
        labelSource.push(sourceLabel[i]);
      }
      for (let d = 0; d < datalist.length; d++) {
        datalist[d].itemStyle = {
          normal: {
            // color: Color[d]
            color: {
              type: "linear",
              x: 0,
              y: 1,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: Color[d], // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: Color1[d], // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        };
        itemStyleColor.push(datalist[d]);
      }
      const option = { 
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          // formatter: function (params) {
          //   if (params.name == "公共平台") {
          //     return " 公共平台 ";
          //   } else {
          //     let value = params.data.value;
          //     if (!value && value !== 0) return 0;
          //     let str = value.toString();
          //     let reg =
          //       str.indexOf(".") > -1
          //         ? /(\d)(?=(\d{3})+\.)/g
          //         : /(\d)(?=(?:\d{3})+$)/g;
          //     if (params.data.source == "公共平台") {
          //       return params.data.target + " : " + str.replace(reg, "$1,");
          //     } else {
          //       return params.data.source + " : " + str.replace(reg, "$1,");
          //     }
          //   }
          // },
        },
        series: [
          {
            type: "sankey",
            layout: "none",
            top: "4%",
            bottom: "4%",
            left: "20",
            right: "20",
            nodeGap: 15,
            nodeWidth: 25,
            focusNodeAdjacency: "allEdges",
            data: itemStyleColor,
            links: linksData,
            label: {
              normal: {
                color: "#fff",
                fontSize: props.fontSize,
                formatter: function (params) {
                  if (params.data.name == linksData[0].source) {
                    let strs = params.data.name.split(""); //字符串数组
                    let str = "";
                    for (let i = 0, s; (s = strs[i++]); ) {
                      //遍历字符串数组
                      str += s;
                      if (!(i % 1)) str += "\n"; //按需要求余
                    }
                    return "{white|" + str + "}";
                  } else {
                    return params.data.name;
                  }
                },
                rich: {
                  white: {
                    fontSize: props.fontSize,
                    lineHeight: 30,
                    padding: [0, 0, 0, -26],
                  },
                },
              },
            },
            lineStyle: {
              normal: {
                opacity: 0.4,
                color: "source",
                curveness: 0.5,
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 1,
                borderColor: "transparent",
              },
            },
          },
        ],
      };
      chartdom.hideLoading();
      chartdom.setOption(option);
    };
    //挂载
    onMounted(() => {
      chartInstance = echarts.init(state.echartref);
      chartInstance.showLoading(showLoading());
      f_echartInit(chartInstance);
    });
    return {
      ...toRefs(state),
      _resetChartStyle,
    };
  },
};
</script>

<style>
</style>